<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>疫情数据查询</title>
    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.css}">
    <link rel="stylesheet" th:href="@{/bootstrap/datepicker/bootstrap-datepicker3.css}">
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-3">
                <div class="input-group date" id="datepicker" data-date-format="yyyy-mm-dd">
                    <div class="input-group-addon">数据日期</div>
                    <input class="form-control" size="16" type="text" value="" readonly id="dataDate">
                    <div class="input-group-addon">
                        <span class="add-on glyphicon glyphicon-calendar"></span>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <button type="button" class="btn" th:onclick="getAll()">全部数据</button>
                <button type="button" class="btn" th:onclick="getAllNoDeleted()">不显示逻辑删除数据</button>
            </div>
        </div>
        <div class="row" >
            <div class="col-md-12" style="background-color: #fff">
                <table class="table">
                    <thead>
                    <tr>
                        <th>id</th>
                        <th>城市编号</th>
                        <th>日期</th>
                        <th>确诊人数</th>
                        <th>疑似人数</th>
                        <th>治愈人数</th>
                        <th>死亡人数</th>
                        <th>逻辑删除</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody id="tbody2">
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</body>
<script th:src="@{/jquery/jquery-3.5.1.js}"></script>
<script th:src="@{/bootstrap/js/bootstrap.js}"></script>
<script th:src="@{/bootstrap/datepicker/bootstrap-datepicker.js}"></script>
<script th:src="@{/bootstrap/datepicker/bootstrap-datepicker.zh-CN.min.js}"></script>
<script th:inline="javascript">
    $(function () {
        var datepicker = $("#datepicker");
        datepicker.datepicker({
            language: 'zh-CN',
            autoclose: true
        });
        var current = new Date();
        datepicker.datepicker("setDate",current);
        var date1 = new Date()
        date1.setDate(current.getDate() - 7);
        datepicker.datepicker("setStartDate", date1);
        datepicker.datepicker("setEndDate", current);
        datepicker.datepicker().on("changeDate", getData());
        getData();
    });
        var fillToTable = function (epidemics) {
            var tbody2 = $("#tbody2");
            tbody2.empty();
            $.each(epidemics, function (index, epidemic) {
                var tr = $("<tr>");
                var td = $("<td>");
                td.text(epidemic.epidemicId);
                tr.append(td);

                td = $("<td>");
                td.html("" + epidemic.cityId);
                tr.append(td);

                td = $("<td>");
                td.html("" + epidemic.date);
                tr.append(td);

                td = $("<td>");
                td.html("" + epidemic.affirmed);
                tr.append(td);

                td = $("<td>");
                td.html("" + epidemic.suspected);
                tr.append(td);

                td = $("<td>");
                td.html("" + epidemic.cured);
                tr.append(td);

                td = $("<td>");
                td.html("" + epidemic.dead);
                tr.append(td);

                td = $("<td>");
                td.html("" + epidemic.isDeleted);
                tr.append(td);

                td = $("<td>");
                td.html("<button class='layui-btn-sm'><i class='layui-icon layui-icon-edit'></i></button>" +
                    "<button class='layui-btn-sm'><i class='layui-icon layui-icon-delete'></i></button>");
                tr.append(td);

                tbody2.append(tr);
            });
        };
        //发送请求获取疫情数据
        function getAll() {
            $.get([[${#request.getContextPath()}]]+"/epidemic-info/ajax/allEpidemic", {}, function (resp) {
                if (resp.code < 0) {
                    alert(resp.msg);
                } else {
                    fillToTable(resp.data);
                }
            }, "json");
        }
        //发送请求获取没有逻辑删除的数据
        function getAllNoDeleted() {
            $.get([[${#request.getContextPath()}]]+"/epidemic-info/ajax/findAllNoDeleted", {}, function (resp) {
                if (resp.code < 0) {
                    alert(resp.msg);
                } else {
                    fillToTable(resp.data);
                }
            }, "json");
        }

        function getData() {
            var date = $("#dataDate").val();
            $.get([[${#request.getContextPath()}]]+"/epidemic-info/ajax/allByDate/"+date, {}, function (resp) {
                if (resp.code < 0) {
                    alert(resp.msg);
                } else {
                    fillToTable(resp.data);
                }
            }, "json");
        }
        getAll();

</script>
</html>